import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:series_play/comm/comm_constant.dart';
import 'package:series_play/widget/app_color.dart';
import 'package:series_play/widget/app_image.dart';
import 'package:series_play/widget/app_tab.dart';
import 'package:series_play/widget/app_text.dart';

class DramaInfoDialog extends StatefulWidget {
  const DramaInfoDialog({super.key});

  @override
  State<DramaInfoDialog> createState() => _DramaInfoDialogState();
}

class _DramaInfoDialogState extends State<DramaInfoDialog>
    with TickerProviderStateMixin {
  late TabController _tabController;

  var mTabIndex = 0;

  final _VideoDesView _videoDesView = _VideoDesView();
  final _VideoSelectEpisodeView _videoSelectEpisodeView =
      _VideoSelectEpisodeView();

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 0).w,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            children: [
              16.horizontalSpace,
              AppImage.round(
                CommConstant.fuckImgData[4],
                width: 76,
                height: 100,
              ),
              13.horizontalSpace,
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  AppText.title('金銮殿上的念母恩', fontSize: 17),
                  11.verticalSpace,
                  AppText.secondary('共100集'),
                ],
              ),
            ],
          ),
          Container(
            width: double.infinity,
            margin: const EdgeInsets.only(top: 23, bottom: 6).w,
            padding: const EdgeInsets.symmetric(horizontal: 6).w,
            alignment: Alignment.centerLeft,
            child: AppTab.videoInfo(['简介', '选集'], _tabController, (index) {
              setState(() {
                mTabIndex = index;
              });
            }),
          ),
          SizedBox(
            height: mTabIndex == 0 ? 0.25.sh : 0.4.sh,
            child: AnimatedSwitcher(
              duration: 200.ms,
              child: mTabIndex == 0 ? _videoDesView : _videoSelectEpisodeView,
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }
}

class _VideoDesView extends StatelessWidget {
  const _VideoDesView({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: SingleChildScrollView(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6).w,
            child: AppText.secondary(
              '慕凤烟在激战之中意外穿越，成为了紫圣国丞相的女，却没想到当自己醒过来时居然已经被下葬了，幸亏得到夜璃玦的帮助，将她从坟墓之中救了出来。此后他们二人多次死里逃生，历经重重危机，最终成功的推翻了皇位，携手踏上了权力的巅峰。',
            ),
          ),
        ),
      ],
    );
  }
}

class _VideoSelectEpisodeView extends StatefulWidget {
  const _VideoSelectEpisodeView({super.key});

  @override
  State<_VideoSelectEpisodeView> createState() =>
      _VideoSelectEpisodeViewState();
}

class _VideoSelectEpisodeViewState extends State<_VideoSelectEpisodeView>
    with TickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 6).w,
          child: AppTab.videoSelectEpisode(['1-30', '31-60'], _tabController),
        ),
        Expanded(
          child: GridView.builder(
            shrinkWrap: true,
            padding: const EdgeInsets.symmetric(horizontal: 16).w,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 6,
              crossAxisSpacing: 8.w,
              mainAxisSpacing: 8.w,
            ),
            itemCount: 30,
            itemBuilder: (context, index) {
              return Container(
                width: double.infinity,
                height: double.infinity,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6).r,
                  color: AppColor.white_20
                ),
                alignment: Alignment.center,
                child: Stack(
                  children: [Center(child: AppText('$index', fontSize: 17))],
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}
